<template>
    <div class="footer">
        <el-row>
            <el-col :span="6">
                <!-- 方法一： -->
                <!-- <el-checkbox v-model="getAllFlag"></el-checkbox> -->
                <!-- 方法二： -->
                <el-checkbox v-model="getAllFlag"></el-checkbox>
                <span class="checkAll">全选或全不选</span>
            </el-col>
            <el-col :span="6" :offset="5">
                <span>选中 {{ selectNum }} 条</span>
                <span>/</span>
                <span>共有 {{ allNum }} 条</span>
            </el-col>
            <el-col :span="6">
                <el-button type="danger" @click="changeArr">删除所选</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">

import { defineComponent,computed } from 'vue'

export default defineComponent({
    props:['allNum','selectNum','setAllCheck','filterTodolist'],
    // emit:['setAllCheck','selectDel'],
    emit:['changeAllFlag'],
    setup (props,{emit}) {
        //方法一：
        //通过watch 监听全选框的flag状态，当他发生变化时，将他变化的值通过emit传给app组件
        // let getAllFlag = ref<boolean>(false)
        // watch(getAllFlag,(value:boolean)=>{
        //     emit('setAllCheck',value)
        // })

        //方法二：计算属性
        const getAllFlag = computed({
            get(){
                // 这里计算属性的初始值不能设置为false  得根据 所有多选框得 flag状态变化
                return props.setAllCheck()
            },
            set(value){
                emit('changeAllFlag',value)
            }
        })


        //删除数组
        const changeArr =()=>{
            //方法一：
            // emit('selectDel')
            //方法二：
            props.filterTodolist()
        }
        return {
            getAllFlag,
            changeArr
        }
    }
})
</script>

<style scoped lang="scss">
.footer{
    line-height: 70px;
    span.checkAll{
        margin-left:20px;
    }
}
</style>